<template>
    <a-card
        class="general-card"
        :title="$t('menu.analysis.fleet')"
        :header-style="{ paddingBottom: '12px' }"
    >
        <div class="mb-2">{{
            $t('ban-zu-teamtimefilterbooleanjoin', [
                teamTime.filter(Boolean).join(' ~ '),
            ])
        }}</div>
        <a-grid :cols="24" :col-gap="12" :row-gap="12">
            <a-grid-item
                :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 4, xxl: 4 }"
            >
                <analysis-item
                    :title="$t('xiao-shou-e')"
                    :data="renderData"
                    value-key="totalAmount"
                    :loading="loading"
                    :card-style="{
                        background: isDark
                            ? 'linear-gradient(180deg, #284991 0%, #122B62 100%)'
                            : 'linear-gradient(180deg, #f2f9fe 0%, #e6f4fe 100%)',
                    }"
                />
            </a-grid-item>
            <a-grid-item
                :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 4, xxl: 4 }"
            >
                <analysis-item
                    :title="$t('jia-zhu-liang')"
                    :data="renderData"
                    value-key="totalVolume"
                    :loading="loading"
                    :card-style="{
                        background: isDark
                            ? ' linear-gradient(180deg, #3D492E 0%, #263827 100%)'
                            : 'linear-gradient(180deg, #F5FEF2 0%, #E6FEEE 100%)',
                    }"
                />
            </a-grid-item>
            <a-grid-item
                :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 4, xxl: 4 }"
            >
                <analysis-item
                    :title="$t('ding-dan-shu')"
                    :data="renderData"
                    value-key="orderNum"
                    :loading="loading"
                    :card-style="{
                        background: isDark
                            ? 'linear-gradient(180deg, #494B94 0%, #0F275C 100% )'
                            : 'linear-gradient(180deg, #D7D7FF 0%, #e6f4fe 100%)',
                    }"
                />
            </a-grid-item>
        </a-grid>
    </a-card>
</template>

<script lang="ts" setup>
    import { ref } from 'vue';
    import dayjs from 'dayjs';
    import useThemes from '@/hooks/themes';
    import useLoading from '@/hooks/loading';
    import AnalysisItem from '../../business/components/analysis-item.vue';
    import { getAnalysisData, getTeamTime } from '../service';

    const { loading, setLoading } = useLoading();
    const renderData = ref({});
    const teamTime = ref([]);

    async function load() {
        try {
            setLoading(true);
            getTeamTime().then((res) => {
                teamTime.value.push(
                    res.result?.startTime || '',
                    dayjs().format('YYYY-MM-DD HH:mm:ss')
                );
            });
            const data = await getAnalysisData();
            renderData.value = data.result;
        } finally {
            setLoading(false);
        }
    }
    load();

    const { isDark } = useThemes();
</script>
